<script>
import { computed, defineComponent } from 'vue';
import { createNamespace, transformSize, transformStyleSize } from '../utils';

export default defineComponent({
  name: createNamespace('Price')[0],
  options: {
    // https://uniapp.dcloud.io/matter.html#mp
    virtualHost: true,
  },
  props: {
    value: [String, Number],
    // 价格 整数、小数 分开显示大小
    split: {
      type: Boolean,
      default: false,
    },
    bold: [Boolean, Number, String],
    color: {
      type: String,
      // default: '#FE3F19'
    },
    size: {
      type: [String, Number],
    },
    symbol: {
      type: String,
      default: '¥',
    },
    symbolPosition: {
      type: String,
      default: 'left',
      validator: (value) => ['left', 'right'].includes(value),
    },
    symbolStyle: [String, Object],
    // 较小项（符号symbol、split的小数位）的大小
    subSize: {
      type: [String, Number],
      // default: '0.67em'
    },
    // 符号与数字间距
    space: {
      type: [String, Number],
      default: '1px',
    },
    font: {
      type: Boolean,
      default: true,
    },
  },
  setup(props) {
    const theStyle = computed(() => {
      const { color, size, bold } = props;
      let s = '';
      if (color) s += `color:${color};`;
      if (size) s += `font-size:${transformSize(size)};`;
      if (
        typeof bold === 'number' ||
        (typeof bold === 'string' && Number(bold) >= 100)
      )
        s += `font-weight:${bold};`;

      return s;
    });
    const subFontSize = computed(() => transformSize(props.subSize));
    const theSymbolStyle = computed(() => {
      const { symbolStyle, symbolPosition, space } = props;
      const pad = transformSize(space);
      let s =
        symbolPosition === 'right'
          ? `padding-left:${pad};`
          : `padding-right:${pad};`;
      if (subFontSize.value) s += `font-size:${subFontSize.value};`;
      return transformStyleSize(symbolStyle) + s;
    });

    const priceChars = computed(() => {
      let arr = ['', ''];
      const value = String(
        typeof props.value === 'undefined' ? '' : props.value,
      );
      if (props.split && value.includes('.')) {
        arr = value.split('.');
        arr[1] = `.${arr[1]}`;
      } else {
        arr[0] = value;
      }
      return arr;
    });

    return { theStyle, subFontSize, theSymbolStyle, priceChars };
  },
});
</script>

<template>
  <div :style="theStyle" class="fan-price" :class="{ 'fan-price--bold': bold, 'fan-price--font': font }">
    <!-- 注意消除元素间间距 -->
    <span v-if="symbol && symbolPosition === 'left'" class="fan-price--s" :style="theSymbolStyle">{{ symbol
      }}</span><span class="fan-price__val">{{ priceChars[0] }}</span><span v-if="priceChars[1]" class="fan-price--s"
      :style="{ fontSize: subFontSize }">{{ priceChars[1] }}</span><span v-if="symbol && symbolPosition === 'right'"
      class="fan-price--s" :style="theSymbolStyle">{{ symbol }}</span>
  </div>
</template>

<style lang="less">
.fan-price {
  font-size: 22px;
  color: var(--fan-highlight-color);

  &--bold {
    font-weight: var(--fan-text-mbold);
  }

  &--font {
    font-family: var(--fan-price-font-family);
  }

  &__val {
    letter-spacing: -0.03em;
    line-height: inherit;
  }

  &--s {
    font-size: 0.67em;
    line-height: inherit;
    display: inline-block;
    transform: translateY(-0.083em);
  }
}
</style>
